Creating shapes - hexagons

revision:

hexagons

top
holiday
holiday holiday holiday
code: 
                <div id="one">
                    <div id="hexagon"></div>
                    <div id="hexagon1"></div>
                    <div id="hexagon2"></div>
                    <div id="hexagon3"><img src="../images/1.jpg" alt="holiday" width="100%" height="auto"/></div>
                    <img id="hexagon4" src="../images/2.jpg" alt="holiday"/>
                    <img id="hexagon5" src="../images/3.jpg" alt="holiday"/>
                    <img id="hexagon6" src="../images/4.jpg" alt="holiday"/>
                </div>
                <style>
                    #one{display: grid; grid-template-columns: 1fr 1fr 1fr; width: 45vw;}
                    #hexagon {width: 10vw;  aspect-ratio: .866; clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 
                        100% 75%, 100% 25%, 50% 0%); background: radial-gradient(#8A9B0F,#3B8686);}
                    #hexagon1 {width: 10vw; aspect-ratio: cos(30deg);  clip-path: polygon( -50% 50%, 50% 100%, 
                        150% 50%, 50% 0%  );background: radial-gradient(red,orange);}
                    #hexagon2 {width: 10vw; aspect-ratio: 1/cos(30deg);  clip-path: polygon(50% -50%, 
                        100% 50%, 50% 150%, 0% 50% );background: radial-gradient(burlywood,brown);}
                    #hexagon3 {width: 10vw; aspect-ratio: 1/cos(30deg);  clip-path: polygon(50% -50%, 
                        100% 50%, 50% 150%, 0% 50% );background: radial-gradient(burlywood,brown);}
                    #hexagon4 {--b: 2vw; height: 10vw; aspect-ratio: 1/cos(30deg); clip-path: 
                        polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%, var(--b) 50%, calc(25% + 
                        var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)), calc(75% - 
                        var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)), calc(100% - var(--b))
                         50%, calc(75% - var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)), 
                         calc(25% + var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)), var(--b) 50%); 
                         background-color: transparent;}
                    #hexagon5 {height: 10vw; aspect-ratio: 1/cos(30deg); clip-path: polygon(50% -50%,
                        100% 50%,50% 150%,0 50%);  background: #3B8686;}
                    #hexagon6 {height: 10vw; aspect-ratio: cos(30deg); clip-path: polygon(-50% 50%,
                        50% 100%,150% 50%,50% 0); background: #3B8686;}
                </style>

making a grid of hexagons

top
code: 
                <div class="main">
                    <div class="container">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
        
                    </div>
                </div>
                <style>
                    .main {display: flex;--s: 7vw;  /* size  */ --m: 0.2vw; --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);}
                    .container {font-size: 0; /* disable white space between inline block element */}
                    .container div{ width: var(--s); margin: var(--m);height: calc(var(--s)*1.1547);  
                        display: inline-block; font-size:initial; clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 
                        100% 75%, 100% 25%, 50% 0%); background: skyblue; margin-bottom: calc(var(--m) - var(--s)*0.2885);}
                    .container div:nth-child(odd) {background:orange;}
                    .container::before { content: ""; width: calc(var(--s)/2 + var(--m)); float: left; height: 120%; 
                    shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000  0 var(--f));}
                </style>

making a grid of octagons

top
code: 
                <div class="main-2">
                    <div class="container-2">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
        
                    </div>
                </div>
                <style>
                    .main-2 {display: flex;--s: 7vw; --r: 1; --hc: 1.5vw; --vc: 1.5vw; --m: 2vw; --m-h: calc(var(--m) + var(--s) - 2*var(--hc))/2;
                        --f: calc(2*var(--s) + 4*var(--m) - 2*var(--vc) - 0.2vw);}
                    .container-2 {font-size: 0; /* disable white space between inline block element */}
                    .container-2 div{ width: var(--s); margin: var(--m) var(--m-h); height: calc(var(--s)*var(--r)); display: inline-block; 
                        font-size: initial; background: aqua; clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--vc), 100% 
                        calc(100% - var(--vc)), calc(100% - var(--hc)) 100%, var(--hc) 100%, 0 calc(100% - var(--vc)),0 var(--vc));  
                        margin-bottom: calc(var(--m) - var(--vc));}
                    .container-2 div:nth-child(odd) {background:crimson;}
                    .container-2::before {content: ""; width: calc(var(--s)/2 + var(--m-h)); float: left; height: 135%; 
                    shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000  0 var(--f));}
                </style>

animated grid of hexagons

code: 
            <div class="main-3">
                <div class="container-3">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
              </div>
              <style>
                .main-3 { display: grid; grid-template-columns: repeat(auto-fit, calc(var(--s) + 2 * var(--mh))); justify-content: center; --s: 80px; --r: 1.15; --h: 0.5;
                --v: 0.25; --hc: calc(clamp(0, var(--h), 0.5) * var(--s)); --vc: calc(clamp(0, var(--v), 0.5) * var(--s) * var(--r)); --mv: 2px; --mh: calc(var(--mv) + (var(--s) - 2 * var(--hc)) / 2); /* horizontal */
                --f: calc(2 * var(--s) * var(--r) + 4 * var(--mv) - 2 * var(--vc) - 2px);}
                .container-3 {grid-column: 1/-1; max-width: 790px; margin: 0 auto; font-size: 0; position: relative; padding-bottom: 50px; filter: drop-shadow(2px 2px 1px #333);
                    }
                .container-3 div { width: var(--s); height: calc(var(--s) * var(--r)); display: inline-block; font-size: initial; clip-path: polygon( var(--hc) 0, calc(100% - var(--hc)) 0,
                100% var(--vc), 100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%, var(--hc) 100%, 0 calc(100% - var(--vc)), 0 var(--vc)); margin-bottom: calc(var(--mv) - var(--vc));}
                .container-3::before { content: ""; width: calc(var(--s) / 2 + var(--mh)); float: left; height: 120%;  shape-outside: repeating-linear-gradient( transparent 0 calc(var(--f) - 2px),
                 #fff 0 var(--f));}
                .container-3 div::before {padding-top: 80px; content: "An interesting \A experience"; text-transform: uppercase; white-space: pre; font-size: 75px; font-family: sans-serif;
                font-weight: bold; text-align: center; position: absolute; color: #fff; background: linear-gradient(45deg, #f03355, #25b09b); inset: 0;}
                .container-3 div {animation: show 3s infinite; opacity: 0; }
                @for $i from 1 through 43 {
                    .container div:nth-child(#{$i}) {animation-delay: (2 * random()) * 1s;}
                }
        
                @keyframes show {
                    60% { opacity: 1;}
                }
            </style>